﻿<html>
    <head>
    <meta charset="UTF-8"/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <title>Binding Membership Card</title>
    <link type="text/css" href="css/all.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
	.breadcrumbs {width: 100%;text-align: left;margin-top: 20px;border-bottom: 1px solid #e6e6e6;padding-bottom: 20px;}
	.breadcrumbs p { text-transform: uppercase; font-weight: bold; }
	.breadcrumbs a { display: inline-block; padding: 1px 17px 0 0; margin-right: 10px; background: url('images/bc-arrow.gif') right no-repeat; color: #1D2339; }
	.changepwd p { position: relative; }
	.changepwd p.loginHint { color: #9EA7B3; font-size: 10px; margin-bottom: 10px; word-spacing: -1px; }
	.changepwd input.login.password { background: url("images/pass.png") no-repeat scroll -2px -2px; border: 0 none; height: 46px; *line-height:46px;
	font-size: 12px; width: 288px; padding-left: 34px; display: block; }
	.changepwd p.loginHint { color: #9EA7B3; font-size: 10px; margin-bottom: 10px; word-spacing: -1px; }
	input.loginimage { background: url("images/secure-login.png"); border: 0 solid #FFFFFF; cursor: pointer; height: 53px; margin-left: -5px; width: 299px; color: #fff; font-size: 18px; font-weight: bold; }
	.container { text-align: left; width: 620px; }
	.side-nav {width: 280px;height: 450px;padding-top: 20px;margin:1px;background:#f6f6f6;border-right: 1px solid #e6e6e6;}
	.side-nav .service-rate { }
	.side-nav .service-rate li h3 { background: url(images/01.png) no-repeat 25px center; color: #000; font-size: 16px; }
	.side-nav .service-rate li a {height: 24px;line-height: 24px;font-size: 12px;overflow: hidden;margin-left: 10px;display: block;text-align: left;text-indent: 6em;color: #424278;background: url(images/jticon.png) no-repeat scroll 45px 5px;}
	label.fieldError {line-height: 23px;color: #ffb042;padding-left: 6px;}
	</style>
	<link href="${rc.getContextPath()}/resources/css/common.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${rc.getContextPath()}/resources/js/jquery.js"></script>
	<script type="text/javascript" src="${rc.getContextPath()}/resources/js/jquery.validate.js"></script>
	<script type="text/javascript">
	
	jQuery.validator.addMethod("validPassword", function(value, element) {		 
		if($("#txtPassword").val()== value){
			return true;
		}else{
			return false;
		}
	}, "Please input the same password");
	
	var base = '${rc.getContextPath()}';
	$(document).ready(function() {	
		var msg = "${msg}";
		if (msg) {
			alert(msg);
		}
	
		<#if memberCard == null>
		var $inputForm = $("#saveForm");
		$inputForm.validate({
			errorClass : "fieldError",
			rules : {
				memberCardCode: {
					required:true,
					remote: {
	                    type: "post",
	                    url: "${rc.getContextPath()}/ajaxMemberCode.html",
	                    data: {
	                    	memberCardCode:function() {
	                            return $("#txtMemberCardCode").val();
	                        },
	                        memberId : '${member.memberId}'
	                    },
	                    dataType: "html",
	                    dataFilter: function(data, type) {
	                    	eval("var data  = "+data+";");
	                        if (data.msg == "true")
	                            return "true";
	                        else {
	                            if ("err1" == data.msg) {
	                            	return "The membership card code inputted is not exist";
	                            } else if ("err2" == data.msg) {
	                            	return "The membership card code inputted was bound by other user";
	                            } else {
	                            	return data.msg
	                            }
	                        }
	                    }
	                }
					
				}
			}
		});
		</#if>
	});
	
	function updateMemberPwd() {
		$("#saveForm").submit();
	}
	</script>
    </head>
<body>
 <#include "${base!}/front/header.html"/>
<div class="main">
  <div class="wrap">
  <div class="breadcrumbs fleft">
              <p>
                <a href="${base!}/front/personal.html">Account management</a> <span class="access"></span>
                <a href="#">Binding membership card</a> <span class="access"></span>
              </p>
            </div> 
  	<div class="fleft side-nav">
        <ul class="service-rate">
        <li>
            <h3>Account management</h3>
        </li>
        <li>
        	<a class="track " href="${base!}/front/personal.html">Personal profile</a>
        </li>
        <li>
        	<a class="track" href="${base!}/front/memberpwd.html">Change password</a>
        </li>
        <li>
        	<a class="track" href="${base!}/front/bindMemberCard.html" style="color:#F78F07">Binding membership card </a>
        </li>
        </ul>
    </div> 
    <div class="fright container" >
            <form id="saveForm" action="${base!}/front/saveBindMemberCard.html" class="changepwd" style="margin-top:20px" method="post">
            	<input type="hidden" name="memberId" value="${member.memberId}"/>
                <p><input type="text" name="memberCardCode" id="txtMemberCardCode" class="login password" value="${memberCard.memberCardCode}" <#if memberCard != null>readonly</#if>/></p>
                <p class="loginHint">Fill in MemberShip Card Code</p>
                <#if memberCard == null>
	                <input type="button" class="loginimage" border="0" value="Bind" onclick="updateMemberPwd()"/>
                <#else>
                	<#if memberCard.isValid == true>
                		<font size="4" color="blue"><b>Audited</b></font>
                	<#else>
	                	<font size="4" color="red"><b>Wait for the administrators to audit</b></font>
                	</#if>
                </#if>
            </form>
    </div>
  </div>
</div>
<#include "${base!}/front/footer.html"/>
</body>
</html>
